<template>
  <select 
    v-model="currentLocale" 
    class="language-switch"
    :title="t('common.language')"
  >
    <option value="cn">中文</option>
    <option value="en">English</option>
  </select>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { computed } from 'vue'

const { locale, t } = useI18n()

const currentLocale = computed({
  get: () => locale.value,
  set: (value) => locale.value = value
})
</script>

<style scoped>
.language-switch {
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
  font-size: 14px;
}

:global(.dark) .language-switch {
  background: #333;
  color: white;
  border-color: #666;
}
</style> 